---
title: React Toast - Flowbite
description: Push notifications to your website visitors using the toast component and choose from multiple sizes, colors, styles, position and icons based on React and Tailwind CSS
---

The toast component can be used to show notifications to your users in a non-intrusive way by positioning it to the corner of the screen. It can be used to show simple messages or more complex ones with buttons and other elements.

Choose from one of the examples below that include different layouts, colors, styles, and icons that you can also customize using React props and the utility classes from Tailwind CSS.

To start using the toast component make sure you import it from Flowbite React:

```jsx
import { Toast } from "flowbite-react";
```

## Default toast

Use the default `<Toast>` React component to show a simple toast message with an icon and a text message.

<Example name="toast.root" />

## Toast colors

Choose one of the following toast examples based on form submission messages to update the color of the component by using the `bg` and `text` utility classes from Tailwind CSS.

<Example name="toast.colors" />

## Feedback toast

Use this example to show a message based on form submission to indicate errors or successful actions.

<Example name="toast.feedback" />

## Toast with button

Add a button to the toast component to allow the user to perform an action or close the toast.

<Example name="toast.withButton" />

## Interactive toast

This component can be used to show more complex messages with buttons and other elements that can be used to perform actions and use the `<ToastToggle>` component to allow the user to close the toast component.

<Example name="toast.interactive" />

## Custom dismissal handling

By passing the `onDismiss` callback prop to the `<ToastToggle>` component, you gain the ability to define your preferred dismissal handling (ex: using other toast libraries like `react-toastfy`). When `onDismiss` is provided, the internal state of the `<Toast />` component will remain unchanged upon clicking `<ToastToggle>`.

<Example name="toast.customDismissal" />

## Theme

To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

<Theme name="toast" />

## References

- [Flowbite Toast](https://flowbite.com/docs/components/toast/)
